<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>修改手机号码</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer/layer.js"></script>
	<style type="text/css">
		* {
			margin: 0rem;
			padding: 0rem;
			text-decoration: none;
			list-style: none;

		}

		html,
		body {
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*font-size:  100rem;*/
			font-size: calc(100vw / 7.5);
			font-family: "microsoft yahei";
		}

		.wrapper-content {
			box-sizing: border-box;
			width: 100%;
			padding-left: 0.32rem;
			font-size: 0.28rem;
			min-height: 9.8rem;
		}

		.wrapper-content .back {
			position: absolute;
			bottom: 0.8rem;
			left: 0.64rem;
			width: 6.25rem;
			height: 0.9rem;
			background: #7f9eba;
			color: #fff;
		}

		.wrapper-content ul .title input {
			display: inline-block;
			width: 100%;
			height: 1rem;
			padding: 0rem;
			border: 0rem;
			font-size: 0.28rem;
		}

		.wrapper-content ul li {
			width: 100%;
			padding-right: 0.32rem;
			height: 1.1rem;
			line-height: 1.1rem;
			font-size: 0.28rem;
			color: #9a9a9a;
			border-bottom: 0.01rem solid #e0f0f0;
		}

		.wrapper-content ul .info-box input {
			width: 4.4rem;
			height: 0.67rem;
			padding: 0;
			border: 0px;
			color: #9a9a9a;
			font-size: 0.28rem;

		}

		.wrapper-content ul .info-box button {
			width: 2.2rem;
			height: 0.67rem;
			vertical-align: top;
			margin-top: 0.2rem;
			background: #809eba;
			color: #fff;
			font-size: 0.28rem;

		}
	</style>
	<script src="../js/jquery.min.js"></script>
</head>

<body>
	<script>
		$(function () {
			$("#wrapper").load("../header.html")

		})
		setTimeout(function () {
			$("#wrapper").find(".con").html("修改手机号码").end().find(".dot img").css("display", "none");
			$(".arrow").on("tap", function () {
				window.location.href = "anquanzhongxin.html";
			})
		}, 200)
		setTimeout(function () {
			$("#wrapper").find(".con").html("修改手机号码").end().find(".dot img").css("display", "none");
			$(".arrow").on("tap", function () {
				window.location.href = "anquanzhongxin.html";
			})
		}, 2000)
	</script>
	<div class="wrapper" id="wrapper"></div>
	<!--内容-->

	<div class="wrapper-content">
		<!--<ul >
				<li class="title">
					<input type="text" placeholder="请输入原来手机号码" class="oldnumber">
				</li>
				<li class="info-box">
					<input type="text" placeholder="请输入验证码">
					<button type="button">发送验证码</button>
				</li>
			</ul>-->
		<ul>
			<li class="title">
				<input type="text" placeholder="请输入新的手机号码" class="newnumber" id="mobile">
			</li>
			<li class="info-box">
				<input type="text" placeholder="请输入验证码" id="verify">
				<button type="button" id="send">发送验证码</button>
			</li>
		</ul>
		<button type="button" class="mui-btn back">确认</button>
	</div>







	<script src="../js/mui.min.js"></script>
	<script>
		var captcha;
		var flag = true;
		var num = 60;
		$(".back").on("click", function () {
			captcha = $("#verify").val();
			console.log(captcha)
			if (!$("#verify").val()) {
				layer.msg("请输入正确的手机号和验证码")
			} else {
				send()
			}
		})

		$("#send").on("click", function () {
			if (num == 60) {
				var mobile = $("#mobile").val();
				console.log(mobile)
				$.ajax({
					type: "POST",
					url: `${localStorage.top}api/sms/send`,
					data: {
						"TOKEN": localStorage.token,
						"mobile": mobile
					},
					success: function (data) {
						console.log(data)
						if (data.code !== localStorage.erro) {
							reduce();
							flag = false;
							console.log("reduce")
						}
						localStorage.newNumber = mobile;
						layer.msg(data.msg)

					}
				})
				
			}else{
				console.log(111)
				layer.msg("请稍后再试")
			}
		})

		function send() {
			$.ajax({
				type: "POST",
				url: `${localStorage.top}api/user/changemobile`,
				data: {
					"TOKEN": localStorage.token,
					"mobile": localStorage.newNumber,
					"captcha": captcha
				},
				success: function (data) {
					layer.msg(data.msg)
					if (data.code == localStorage.success) {
						localStorage.mobile = localStorage.newNumber;
						setTimeout(function () {
							window.location.href = "anquanzhongxin.html"
						}, 500)
					}
				}
			})
		}

		function reduce() {
			settime()
			$("#send").html();
		}

		function settime() {
			if (num != 0) {
				setTimeout(function () {
					num--;
					$("#send").html(num + "秒后重试");
					reduce()
				}, 1000)
			} else {
				num = 60;
				$("#send").html("发送验证码");
			}
		}

	</script>
</body>

</html>